<script type="text/x-template" id="config-template-dialog">
    <el-dialog
            :style="{visibility: isDragging ? 'hidden' : 'unset' }"
            class="cc-json-edit-selector"
            title="新增模板"
            :visible.sync="visible"
            :modal="false"
            fullscreen="true"
            size="full"
            :before-close="handleClose">
        <div class="action-list">
            <div style="padding: 10px;">
                <el-button type="success" @click="handleSaveConfigTemplate">
                    保存模板
                </el-button>
                <el-button type="warning" @click="handleCancel">
                    取消
                </el-button>
            </div>
        </div>
        <div>
            <el-form label-width="170px">
                <el-form-item label="配置模板名称">
                    <el-input v-model.trim="configTemplateName"></el-input>
                </el-form-item>
                <el-form-item label="配置模板Json">
                    <cc-json-edit-el v-model="json"
                    >
                    </cc-json-edit-el>
                </el-form-item>

            </el-form>
        </div>
    </el-dialog>
</script>

<script>
    Vue.component('config-template-dialog', {
        data() {
            return {
                isDragging: false,
                configTemplateName: '',
                json: {},
                urls: {
                    saveConfigTemplate: '/codeGen/saveConfigTemplate'
                },
            }
        },
        watch: {},
        template: '#config-template-dialog',
        methods: {
            handleClose() {
                this.$emit('cancel')
            },
            handleCancel() {
                this.$emit('cancel')
            },
            handleSaveConfigTemplate() {
                if (this.configTemplateName) {
                    this.$confirm('是否确认保存配置模板：' + this.configTemplateName, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        const data = this.getFormData()
                        this.ajax(this.urls.saveConfigTemplate, data, function (result) {
                            if (result.success) {
                                this.$message({
                                    showClose: true,
                                    message: '保存成功',
                                    type: 'success'
                                })
                                this.handleCancel()
                            } else {
                                this.$message(result.msg);
                            }
                        }.bind(this));
                    }.bind(this)).catch(function () {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    }.bind(this));
                } else {
                    this.$message('请填写配置模板名称')
                }
            },
            getFormData() {
                let saveData = {};
                saveData.configName = this.configTemplateName
                saveData.configJson = this.json
                let jsonStr = JSON.stringify(saveData);
                const data = {jsonStr: jsonStr}
                return data
            },
        },
        created() {
            this.visible = true
        }
    })
</script>